<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>lottery</title>
<style type="text/css">
	.qimo8{ overflow:hidden;}
	.qimo8 .qimo {/*width:99999999px;*/width:8000%;}
	.qimo8 .qimo div{ float:left;}
	.qimo8 .qimo ul{float:left;overflow:hidden; zoom:1; }
	.qimo8 .qimo ul li{float:left; list-style:none; font-size: 35px;margin: 0 1rem;}
	#panel {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	#panel-form {
		margin-top: 30%;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		background-color: #FFFFFF;
		text-align: center;
	}

	#tip {
		display: block;
	    font-size: 50px;
	    margin-top: 10px;
	    color: #FFFFFF;
	    font-weight: bold;
	}


</style>
<link rel="stylesheet" type="text/css" href="./static/css/styleCJ.css"/>
<link href="./static/css/bootstrap.min.css" rel="stylesheet" />
<script src="./static/js/common.js"></script>
</head>
<body>
<div id="panel">
	<div id="panel-form" style="background-color: #FF6666; margin-top: 4rem; padding-top: 50px; padding-bottom: 50px;">
	    <label for="code-input" style="font-size: 50px;color: #FFFFFF">请输入抽奖码</label>
	    <input class="form-control input-lg" style="margin-top: 20px; height: 70px; width: 80%; margin-left: auto; margin-right: auto; font-size: 50px;" type="text" id="code-input" placeholder="抽奖码">
	  	<button type="submit" class="btn btn-danger btn-lg btn-style" style="font-size: 50px; margin-top: 30px;" onclick="VerifyCode()">提交抽奖</button>
	  	<span id="tip"></span>
	</div>
</div>

<div class="modal fade bs-example-modal-lg"  id="my-model" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document" style="margin-top: 4rem">
    <div class="modal-content" style="text-align: center; background-color: #FF6666; padding-top: 50px; padding-bottom: 50px">
    	<h1 style="color: #FFFFFF; font-size: 60px; font-weight: bold;">恭喜您！中奖啦！</h1>
    	<button type="button" class="btn btn-danger btn-lg btn-style" style="font-size: 50px; margin-top: 20px; margin-right: 40px;">到店领取</button>
    	<button type="button" class="btn btn-danger btn-lg btn-style" style="font-size: 50px; margin-top: 20px">邮寄到家</button>
    </div>
  </div>
</div>


<!-- 代码 开始 -->
<div class="shanDeng" id="deng">
	<div id="luck"><!-- luck -->
		<table style="border-spacing:.08rem .03rem;">
			<tr>
				<td class="luck-unit luck-unit-0"><img src="./static/img/01.png"></td>
				<td class="luck-unit luck-unit-1"><img src="./static/img/02.png"></td>
				<td class="luck-unit luck-unit-2"><img src="./static/img/03.png"></td>
			</tr>
			<tr>
				<td class="luck-unit luck-unit-7"><img src="./static/img/05.png"></td>
				<td class="cjBtn" id="btn"></td>
				<td class="luck-unit luck-unit-3"><img src="./static/img/01.png"></td>
			</tr>
			<tr>
				<td class="luck-unit luck-unit-6"><img src="./static/img/02.png"></td>
				<td class="luck-unit luck-unit-5"><img src="./static/img/04.png"></td>
				<td class="luck-unit luck-unit-4"><img src="./static/img/03.png"></td>
			</tr>
		</table>
	</div><!-- luckEnd -->
</div>

<!-- <div class="rule">
	<p>抽奖活动规则</p>
	<p>1、单次加油满200元,可抽奖一次;</p>
	<p>2、各种奖券使用规则详见该奖券的使用说明;</p>
	<p>3、奖券请在有效期内使用或者分享给其他朋友,过期无效</p>
</div> -->

<div class="play">
	<span></span><div class="div">
	<div id="demo" class="qimo8">
		<div class="qimo">
			<div id="demo1">
				<ul>
					<li>站长素材获得一等奖</li>
					<li>站长素材获得二等奖</li>
					<li>站长素材获得三等奖</li>
					<li>站长素材获得四等奖</li>
				</ul>
			</div>
			<div id="demo2"></div>
		</div>
	</div>
</div>

<script type="text/javascript" src="./static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./static/js/axios.min.js"></script>
<script type="text/javascript" src="./static/js/bootstrap.min.js"></script>
<script>
	var luck={
		index:0,	//当前转动到哪个位置，起点位置
		count:0,	//总共有多少个位置
		timer:0,	//setTimeout的ID，用clearTimeout清除
		speed:20,	//初始转动速度，值越大，速度越慢
		times:0,	//转动次数
		cycle:50,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
		prize:-1,	//中奖位置
		init:function(id){
			if ($("#"+id).find(".luck-unit").length>0) {
				$luck = $("#"+id);
				$units = $luck.find(".luck-unit");
				this.obj = $luck;
				this.count = $units.length;
				$luck.find(".luck-unit-"+this.index).addClass("active");
			};
		},

		
		roll:function(){
			var index = this.index;
			var count = this.count;
			var luck = this.obj;
			$(luck).find(".luck-unit-"+index).removeClass("active");
			index += 1;
			if (index>count-1) {
				index = 0;
			};
			$(luck).find(".luck-unit-"+index).addClass("active");
			this.index=index;
			return false;
		},
		stop:function(index){
			this.prize=index;
			return false;
		}
	};


	function roll(){
		luck.times += 1;
		luck.roll();
		if (luck.times > luck.cycle+10 && luck.prize==luck.index) {
			// 中奖了
			clearTimeout(luck.timer);
			luck.prize=-1;
			luck.times=0;
			click=false;
			$('#my-model').modal({backdrop: 'static', keyboard: false});
			$("#my-model").modal('show')
		}else{
			if (luck.times<luck.cycle) {
				// 没有转到中奖圈，速度递增
				luck.speed -= 10;
			}else if(luck.times==luck.cycle) {
				// 转到中奖圈，生成最终中奖位置
				// var index = Math.random()*(luck.count)|0;
				// if(index>5){
				// 	index = 7;
				// }else {
				// 	index = 5;
				// }
				// luck.prize = index;//最终中奖位置
				luck.prize = 5;
			}else{
				if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) {
					// 到中奖上个位置，速度递减
					luck.speed += 110;
				}else{
					// 到中奖圈数，每跳一个速度减少20
					luck.speed += 20;
				}
			}
			if (luck.speed<40) {
				luck.speed=40;
			};

			luck.timer = setTimeout(roll,luck.speed);
		}
		return false;
	}


	var click=false;
	window.onload=function(){

		luck.init('luck');
		$("#btn").click(function(){

			if(click) {
				return false;
			}
			else{
				// 解绑点击按钮事件
				$("#btn").unbind();
				$("#btn").css('background-image',"url('./static/img/cjBtnUnuse.png')")
				luck.speed=100;
				roll();
				click=true;
				return false;
			}

		});
	};
	//播报
	var demo = document.getElementById("demo");
	var demo1 = document.getElementById("demo1");
	var demo2 = document.getElementById("demo2");
	demo2.innerHTML=document.getElementById("demo1").innerHTML;
	
	function Marquee(){
		if(demo.scrollLeft-demo1.offsetWidth>=0){
			demo.scrollLeft-=demo1.offsetWidth;
		}
		else{
			demo.scrollLeft++;
		}
	}
	setInterval(Marquee,10);



	function closePanel() {
		$("#panel").css('display', 'none')
	}


	function VerifyCode() {
		axios.get('/lottery/VerifyCode.php', {
		params: {
		  	code: $('#code-input').val()
		}
		})
		.then(function (response) {
			console.log(response);
			let data = response.data
			if (data.status == 'success') {
				closePanel()
			} else {
				$("#tip").text(data.info)
			}
		})
		.catch(function (error) {
			console.log(error);
		});
	}
</script>

</body>
</html>